<template>
  <div class="main-resume">
    <!--顶部操作栏-->
    <div class="resume-top">
      <img alt="logo" src="@/assets/logo.svg" @click="toHome">
      <span>我的简历</span>
      <div>
        <RButton @click="saveResume" size="small">保存</RButton>
        <RButton @click="downResume" size="small">下载</RButton>
      </div>
    </div>

    <!--背景图-->
    <div class="bg-style" :style="bgStyle"></div>
    <!--上边栏-->
    <Base :customize-style="topStyle" :customize-mods="topMods"/>
    <!--中间栏-->
    <div class="mid-style">
      <!--左侧栏-->
      <Base :customize-style="leftStyle" :customize-mods="leftMods"/>
      <!--右侧栏-->
      <Base :customize-style="rightStyle" :customize-mods="rightMods"/>
    </div>
    <!--下边栏-->
    <div></div>

    <!--侧边操作栏-->
    <div class="side-op">
      <div @click="onMod">
        <img alt="模块" src="@/assets/mod/module.svg"/>
        <span>管理模块</span>
      </div>
      <div @click="onTemp">
        <img alt="模版" src="@/assets/mod/template.svg">
        <span>更换模版</span>
      </div>
      <div @click="onTheme">
        <img alt="主题" src="@/assets/mod/theme.svg">
        <span>主题设置</span>
      </div>
    </div>

    <!--管理模块-->
    <RMenu width="200px" title="管理模块" v-model="isManageMod">
      <div class="mod-info" v-for="item in compPath" :key="item.id">
        <span>{{item.name}}</span>
        <img :src="getIcon(item.show)" class="item-switch" @click="hideMod(item.id)">
      </div>
      <div @click="addMod" class="add-mod">
        <img alt="添加" src="@/assets/resume/skill/plus.svg"/>
        <span>自定义模块</span>
      </div>
    </RMenu>

    <!--主题设置-->
    <RMenu width="200px" title="主题设置" v-model="isSetTheme">
      <div class="color-choose">
        <div>颜色</div>
        <div class="color-content">
          <div @click="setGlobalColor(color)"
               v-for="(color, index) in colorLs" :key="index" :style="{background: color}">
            <img alt="选中" src="@/assets/resume/color_checked.svg" v-if="globalStyle.modStyle.color===color"/>
          </div>
        </div>
      </div>
      <div class="global-info" v-for="(item, index) in settingLs" :key="index">
        <span>{{item.name}}</span>
        <input :value="item.value" @input="setGlobalStatus(item.mutation, $event)"/>
      </div>
    </RMenu>
  </div>
</template>

<script>
import jsonData from '../api/data/data.json'
import Base from '../components/resume/Base'
import RMenu from '../components/base/RMenu'
import {mapState} from 'vuex'
import RButton from '../components/base/RButton'
import toPdf from '../store/util'

export default {
  name: 'Resume',
  data () {
    return {
      isManageMod: false,
      isChangeTemp: false,
      isSetTheme: false,
      colorLs: Object.freeze([
        'lightskyblue', 'whitesmoke', 'orangered', 'hotpink',
        'orange', 'greenyellow', 'lightgreen', 'mediumpurple',
        'crimson', 'deepskyblue', 'black', '#A29177'
      ]),
      settingLs: [],
      template: ''
    }
  },
  components: {
    RButton,
    Base,
    RMenu
  },
  created () {
    this.initTemplateData()
  },
  methods: {
    initTemplateData (template = 'second', isChange = false) {
      this.template = template
      let baseTemplate = require(`../api/template/${template}/template.json`),
        compPathData = require(`../api/template/${template}/comp-path.json`)

      let storePath = localStorage.getItem(`compPath-${template}`)
      if (storePath) {
        storePath = JSON.parse(storePath)
      } else {
        storePath = compPathData
      }
      let states = null
      if (isChange) {
        states = {compPath: storePath, ...baseTemplate}
      } else {
        let storeData = localStorage.getItem('compData')
        if (storeData) {
          storeData = JSON.parse(storeData)
        } else {
          storeData = jsonData
        }
        states = {compDataLs: storeData, compPath: storePath, ...baseTemplate}
      }
      this.$store.commit('SET_STATES', states)
    },
    onMod () {
      this.isManageMod = !this.isManageMod
    },
    onTemp () {
      let newTemplate = ''
      switch (this.template) {
        case 'first':
          newTemplate = 'second'
          break
        case 'second':
          newTemplate = 'third'
          break
        default:
          newTemplate = 'first'
      }
      this.initTemplateData(newTemplate, true)
    },
    onTheme () {
      this.settingLs = [
        {name: '字体', mutation: 'SET_GLOBAL_FONT', value: this.globalStyle.baseStyle.fontFamily},
        {name: '字体大小', mutation: 'SET_GLOBAL_SIZE', value: this.globalStyle.baseStyle.fontSize},
        {name: '页边距', mutation: 'SET_GLOBAL_PADDING', value: this.globalStyle.baseStyle.padding},
        {name: '模块距离', mutation: 'SET_MOD_PADDING', value: this.globalStyle.modStyle.paddingBottom}
      ]
      this.isSetTheme = !this.isSetTheme
    },
    getIcon (status) {
      return require(`@/assets/resume/switch_${status ? 'on' : 'off'}.svg`)
    },
    hideMod (id) {
      this.$store.commit('DEL_MOD', {id})
    },
    addMod () {
      this.$store.commit('ADD_MOD')
    },
    getMods (pos) {
      let before = [], after = [], item
      for (let i = 0; i < this.compPath.length; i++) {
        item = this.compPath[i]
        if (item.container === pos) {
          item.side === 'before' ? before.push(item) : after.push(item)
        }
      }
      return (before.length > 0 || after.length > 0) ? {before, after} : null
    },
    setGlobalColor (value) {
      this.$store.commit('SET_MOD_COLOR', {value})
    },
    setGlobalStatus (mutation, event) {
      this.$store.commit(mutation, {value: event.target.value})
    },
    saveResume () {
      this.$store.commit('SAVE_DATA', {template: this.template})
    },
    downResume () {
      // eslint-disable-next-line new-cap
      toPdf(this.$el)
    },
    toHome () {
      this.$router.push('/Diy')
    }
  },
  computed: {
    ...mapState([
      'globalStyle',
      'bgStyle',
      'topStyle',
      'leftStyle',
      'rightStyle',
      'bottomStyle',
      'compDataLs',
      'compPath'
    ]),
    topMods () {
      return this.getMods('top')
    },
    leftMods () {
      return this.getMods('left')
    },
    rightMods () {
      return this.getMods('right')
    }
  }
}
</script>

<style scoped lang="less">
  .main-resume {
    background-color: white;
    position: relative;
    height: 1160px;
    width: 820px;
    margin-top: 65px;
    margin-bottom: 25px;
    left: calc(~"50% - 410px + 25px");
    box-shadow: 0 10px 10px -5px darkgrey;

    .bg-style {
      position: absolute;
      z-index: 0;
    }

    .mid-style {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
    }

    .side-op {
      position: fixed;
      left: 0;
      top: 40px;
      height: 100%;
      width: 50px;
      background-color: lightskyblue;
      transition: width 0.5s;
      z-index: 90;

      &:hover {
        width: 140px;
      }

      div {
        padding: 20px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow: hidden;
        cursor: pointer;

        &:hover {
          background-color: rgba(0, 0, 0, 0.2);
        }

        img {
          width: 15px;
          margin-right: 15px;
        }

        span {
          color: white;
          font-size: 15px;
          white-space: nowrap;
        }
      }
    }

    .mod-info {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid lightgrey;
      padding: 12px 7px;

      img {
        width: 35px;
        cursor: pointer;
      }
    }

    .add-mod {
      margin-top: 30px;
      height: 40px;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      border: 1px solid lightskyblue;
      border-radius: 2px;
      color: lightskyblue;
      cursor: pointer;

      img {
        width: 15px;
        margin-right: 10px;
      }
    }

    .color-choose {
      margin-top: 10px;

      .color-content {
        height: 144px;
        margin: 10px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        > * {
          width: 36px;
          height: 36px;
          border-radius: 18px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;

          &:hover {
            border: 1px solid black;
          }

          img {
            width: 20px;
          }
        }
      }
    }

    .global-info {
      margin-bottom: 10px;
      display: flex;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;

      input {
        width: 80px;
        border-radius: 3px
      }
    }

    .resume-top {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: white;
      box-sizing: border-box;
      padding: 0 20px;
      z-index: 90;
      box-shadow: 0 2px 5px lightgrey;

      img {
        height: 25px;
        cursor: pointer;
      }
    }
  }

</style>
